<template>
  <div class="main-wrap">
    <div class="operation-wrap">
      <el-button size="mini" type="primary" @click="openDia">添加</el-button>
      <el-button size="mini" type="primary" @click="openExcel">导入</el-button>
      <el-button
        size="mini"
        type="warning"
        plain
        icon="el-icon-download"
        @click="handleExport"
      >
        导出
      </el-button>
    </div>
    <el-table :data="rows" :row-style="{ height: '40px' }" style="width: 100%">
      <el-table-column label="学工号" width="180">
        <template slot-scope="scope">
          <div>{{ scope.row.number }}</div>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <div>{{ scope.row.username }}</div>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="180">
        <template slot-scope="scope">
          <div>{{ typeEum[scope.row.type] }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="角色"
        width="180"
        prop="roleName"
      ></el-table-column>
      <el-table-column label="性别" width="180" prop="sex">
        <template slot-scope="scope">
          <div>
            {{ scope.row.sex ? (scope.row.sex == 0 ? "女" : "男") : "" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="生日" width="180" prop="birth"></el-table-column>
      <el-table-column
        label="手机号"
        width="180"
        prop="phone"
      ></el-table-column>
      <el-table-column label="违规次数">
        <template slot-scope="scope">
          <div>{{ scope.row.rulebreak }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="openDia(scope.row)">编辑</el-button>
          <el-button type="text" @click="delUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column label="重置密码">
        <template slot-scope="scope">
          <div style="display: flex;align-items: center">
            <input :id="'input' + scope.$index" type="text"></input>
            <el-button size="mini" @click="remarkPwd(scope.$index, scope.row)">重置
            </el-button>
          </div>

        </template>
      </el-table-column> -->
    </el-table>

    <el-dialog
      :title="fromData.id ? '修改' : '新增'"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        :model="fromData"
        status-icon
        ref="dataForm"
        label-width="100px"
        class="form-wrap"
      >
        <el-form-item label="用户名" prop="number">
          <el-input v-model="fromData.number"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="username">
          <el-input v-model="fromData.username"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="fromData.sex">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <el-date-picker
            v-model="fromData.birth"
            type="date"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="fromData.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="fromData.email"></el-input>
        </el-form-item>
        <el-form-item label="院系" prop="faculty">
          <el-input v-model="fromData.faculty"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="profession">
          <el-input v-model="fromData.profession"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="fromData.roleId">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户类型" prop="type">
          <el-select v-model="fromData.type">
            <el-option label="学生" :value="0"></el-option>
            <el-option label="老师" :value="1"></el-option>
            <el-option label="管理员" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="用户数据导入"
      append-to-body
      :visible.sync="execBox"
      width="555px"
    >
      <div>
        <div>
          下载模板：
          <el-button size="mini" type="primary" @click="handleTemplate()">
            点击下载<i class="el-icon-download el-icon--right"></i>
          </el-button>
        </div>
        <div class="upload-box">
          <span>模板上传：</span>
          <el-upload
            class="upload-demo"
            action=""
            multiple
            :limit="100"
            :file-list="fileList"
            :show-file-list="false"
            :http-request="uploadFile"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传xls/xlsx文件，且不超过500kb
            </div>
          </el-upload>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="execBox = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/req";

export default {
  name: "Management",
  data() {
    return {
      rows: null,
      username: null,
      password: null,
      number: null,
      fromData: {
        uid: "",
        number: "",
        username: "",
        sex: 1,
        birth: "",
        phone: "",
        email: "",
        photo: "",
        image: "",
        faculty: "",
        profession: "",
        rulebreak: "",
        sectoral: "",
        state: "",
        roleId: "",
        type: "",
      },
      dialogVisible: false,
      execBox: false,
      typeEum: {
        0: "学生",
        1: "老师",
        2: "管理员",
      },
      relus: [],
      roleList: [],
      fileList: [],
    };
  },
  methods: {
    add() {
      request
        .post("/public/register", {
          number: this.number,
          password: this.password,
          username: this.username,
          type: 0,
        })
        .then((res) => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.number = "";
          this.username = "";
          this.password = "";
          this.update();
        });
    },
    openDia(data) {
      this.getRoleList();
      this.dialogVisible = true;
      this.fromData.uid = "";
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        Object.assign(this.fromData, data);
      });
    },
    async submitForm() {
      if (this.fromData.uid) {
        await request.post("/user/updUser", this.fromData);
        this.$message({
          message: "修改成功",
          type: "success",
        });
      } else {
        await request.post("/public/register", this.fromData);
        this.$message({
          message: "添加成功",
          type: "success",
        });
      }
      this.dialogVisible = false;
      this.getUserList();
    },
    async delUser(data) {
      await request.post("/user/delUser", { uid: data.uid });
      this.$message({
        message: "删除成功",
        type: "success",
      });
      this.getUserList();
    },
    async getRoleList() {
      const res = await request.get("/role/getRoleList");
      this.roleList = res;
    },
    remarkPwd(index, row) {
      this.$nextTick(() => {
        let input = document.getElementById("input" + index);

        request
          .post("/admin/updatePwd", {
            uid: row.uid,
            password: input.value,
          })
          .then((res) => {
            input.value = "";
            this.$message({
              message: "修改成功",
              type: "success",
            });
          });
      });
    },
    getUserList() {
      request.get("/admin/getUser").then((res) => {
        this.rows = res.rows;
      });
    },
    openExcel() {
      this.execBox = true;
    },
    handleTemplate() {
      console.log(window.location);
      window.open(`//127.0.0.1:9003/user/export-template`);
    },
    uploadFile(item) {
      let formData = new FormData();
      formData.append("file", item.file);
      formData.append("file_name", item.file.name);
      //请求接口
      request.post("/user/import-user", formData).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "导入成功",
            type: "success",
          });
          this.execBox = false;
          this.fileList = [];
          this.getUserList();
        } else {
          this.$message({
            message: res.msg,
            type: "warning",
          });
          this.fileList = [];
        }
      });
      // this.$axios.post(formData).then((res) => {})
    },
    handleExport() {
      window.open(`//127.0.0.1:9003/user/export-user`);
    },
  },
  created() {
    this.getUserList();
  },
};
</script>

<style scoped>
div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

input {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: #102438 solid 1px;
  width: 10em;
}

.upload-box {
  display: flex;
  margin-top: 30px;
}
.upload-box span {
  padding: 5px;
}
</style>
